<template>
  <div class="ull-height bg-white page-content content">
    <!--  当前没有工序时显示-->
    <div class="no-workshop" v-if="showAddBtn">
      <div class="add-btn cursor-pointer flex justify-center items-center" @click="showWorkShop">
        <div>
          <q-icon name="iconfont icontubiao-39" size="48px"/>
          <div class="margin-t-10">添加布局图</div>
        </div>
      </div>
    </div>
    <template v-else>
      <tabs :tabList="workshopList" v-model="selTab" @addTab="showWorkShop" @deleteTab="deleteTab"/>
      <div class="scroll scrollbar">
        <div :style="{'width': `${cols * 166 - 10}px`}">
          <div v-for="(item, index) in rows*cols" :key="index" class="item-box" :style="{'padding-right': (index + 1) % cols ? '20px' : '10px'}">
            <q-icon name="iconfont icontubiao-52"
                    v-show="devices[index] && devices[index].deviceId !== undefined"
                    @click="delDevice(devices[index].id)"
                    style="color: #999;font-size: 22px;position: absolute;right: 10px;top: 0;cursor:pointer;background-color: #ffffff;border-radius: 50%"
                    :style="{'right': (index + 1) % cols ? '10px' : 0}"
            />
            <div
              @click="addDevice(index, devices[index])"
              class="item text-ellipsis"
              :class="{'has-color': devices[index] && devices[index].lineColor }"
              :style="{'background-color': devices[index] && devices[index].lineColor ? devices[index].lineColor : '#ffffff'}">

              {{devices[index] && devices[index].deviceId !== undefined ? devices[index].assetNumber : '添加设备'}}
            </div>
          </div>
        </div>
      </div>
    </template>
    <create-layout ref="createLayout" @getWorkShop="getWorkShop"/>
    <add-device ref="addDevice" @getWorkshopLayout="getWorkshopLayout"/>
  </div>
</template>

<script>
import createLayout from './components/machine-layout/create-layout'
import tabs from 'src/components/tab'
import addDevice from './components/machine-layout/add-device'
import { getWorkshops, deleteMachineLayout, getWorkshopLayout, delDevice } from 'src/boot/system/machine-layout'
import _ from 'lodash'
export default {
  name: 'machine-layout',
  components: {
    createLayout,
    addDevice,
    tabs
  },
  data () {
    return {
      workshopList: [],
      selTab: null,
      rows: 0,
      cols: 0,
      devices: {},
      showAddBtn: false
    }
  },
  created () {
    this.getWorkShop()
  },
  watch: {
    selTab () {
      this.$q.loading.show()
      this.getWorkshopLayout()
    }
  },
  methods: {
    // 获取已设置的车间布局图(删除后显示首个，新增后显示新增布局)
    getWorkShop (selTab = null) {
      this.$q.loading.show()
      getWorkshops(true).then(res => {
        if (res.length) {
          this.workshopList = res.map(item => {
            return {
              name: item.id,
              label: item.name
            }
          })
          this.selTab = selTab === null ? this.workshopList[0].name : selTab
          this.getWorkshopLayout()
          this.showAddBtn = false
        } else {
          this.showAddBtn = true
          this.$q.loading.hide()
        }
      })
    },
    // 获取车间布局
    getWorkshopLayout () {
      getWorkshopLayout(this.selTab).then(res => {
        this.cols = res.workshopRow
        this.rows = res.workshopLine
        this.devices = _.keyBy(res.devices, 'position')
        this.$q.loading.hide()
      })
    },
    // 删除布局图
    deleteTab (data) {
      this.$utils.showMessage('icontubiao-28', '确认删除此布局图吗？', () => {
        this.$q.loading.show()
        deleteMachineLayout(data.name).then(res => {
          if (res.code + '' === '1200') {
            this.getWorkShop()
            this.$message.success('操作成功')
          }
        }).catch(() => {
          this.$q.loading.hide()
        })
      }, true)
    },
    // 删除设备
    delDevice (id) {
      this.$q.loading.show()
      delDevice(id).then(res => {
        if (res.code + '' === '1200') {
          this.getWorkshopLayout()
          this.$message.success('操作成功')
        }
      }).catch(() => {
        this.$q.loading.hide()
      })
    },
    // 新增设备
    addDevice (index, editInfo) {
      this.$refs.addDevice.showDialog(this.workshopList.find(item => item.name === this.selTab), index, this.rows, this.cols, editInfo)
    },
    showWorkShop () {
      this.$refs.createLayout.showDialog()
    }
  }
}
</script>

<style scoped lang="stylus">
  .no-workshop{
    margin auto
    .add-btn{
      width 140px
      height 140px
      border-radius 6px
      border 1px dashed #d3d3d3
      font-size 16px
      text-align center
      color #999
      &:hover{
        border-color $primary
        color $primary
        background-color rgba(95, 119, 253, 0.17)
        transition all ease-in .2s
      }
    }
  }
  .scroll{
    max-height: calc(100% - 40px)
    margin: 20px 20px 20px
    padding-right 14px
  }
  .item-box{
    display inline-block
    padding 10px 20px 10px 0
    position relative
    .item{
      width: 146px;
      height: 60px;
      border-radius: 6px;
      font-size 16px
      line-height 58px !important
      border 1px solid #5F77FD
      text-align center
      padding 0 10px
      &.has-color{
        border none
        color #ffffff
        line-height 60px !important
      }
    }
  }

</style>
